<template>
  <aside id="slider" class="main-sidebar">
    <section class="sidebar">
      <ul class="sidebar-menu">
        <template v-for="(item,index) in menus">
          <router-link class="treeview" v-if="isShowMenu(item)" :key="index" :to="item.path" tag="li" :exact="item.path == '/'">
            <a>
              <i :class="['fa', 'fa-' + item.icon]"></i>
              <span>{{item.title}}</span>
            </a>
          </router-link>
        </template>
      </ul>
    </section>
  </aside>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  props: {
    menus : {
        default : () => []
    }
  },
  computed: {
     ...mapState(['userInfo', 'serverInfo']),
    path(){
      return location.pathname;
    }
  },
  methods: {
    ...mapActions([
      "getServerInfo"
    ]),
    isShowMenu(menu) {
      if(menu.versionType && this.serverInfo.VersionType && menu.versionType != this.serverInfo.VersionType) {
        return false;
      }
      if(menu.roles && !this.hasAnyRole(this.serverInfo, this.userInfo, ...menu.roles)) {
        return false;
      }
      if(menu.path == "/about" && this.serverInfo.ShowAbout === false) {
        return false;
      }
      if(menu.hideInIE && videojs.browser.IE_VERSION) {
        return false;
      }
      // if(menu.meta && menu.meta.needLogin && !this.userInfo){
      //   return false;
      // }
      return true;
    }
  }
}
</script>

<style lang="less" scoped>
  .main-sidebar {
  /* Fix for IE */
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
</style>

